<template>
  <div id="homeView">
    <el-card shadow="always">

      <el-form :inline="true" size="medium" :model="OrderSearch" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="OrderSearch.shippingName" placeholder="物流名称"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="OrderSearch.shippingCode" placeholder="物流单号"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="OrderSearch.userId" placeholder="用户id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  plain @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success"  @click="editOrder" icon="el-icon-plus">添加订单</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" icon="el-icon-delete" plain @click="deleteOrder" >批量删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"    @click="login">返回用户管理</el-button>
        </el-form-item>
      </el-form>

      <el-table
          :data="OrderList"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="订单id"
            prop="orderId"
            align="center"
            width="180">
        </el-table-column>
        <el-table-column
            label="实付金额"
            align="center"
            prop="payment">
        </el-table-column>
        <el-table-column
            label="支付类型"
            align="center"
            prop="paymentType">
        </el-table-column>
        <el-table-column
            label="邮费"
            align="center"
            prop="postFee">
        </el-table-column>
        <el-table-column
            label="状态"
            align="center"
            prop="status">
        </el-table-column>
        <el-table-column
            label="物流名称"
            align="center"
            prop="shippingName">
        </el-table-column>
        <el-table-column
            label="物流单号"
            align="center"
            prop="shippingCode">
        </el-table-column>
        <el-table-column
            label="用户id"
            align="center"
            prop="userId">
        </el-table-column>
        <el-table-column
            label="买家留言"
            align="center"
            prop="buyerMessage">
        </el-table-column>
        <el-table-column
            label="买家昵称"
            align="center"
            prop="buyerNick">
        </el-table-column>
        <el-table-column
            label="买家是否已经评价"
            align="center"
            prop="buyerRate">
        </el-table-column>
        <el-table-column
            label="收货人地区名称"
            align="center"
            prop="receiverAreaName">
        </el-table-column>
        <el-table-column
            label="收货人手机"
            align="center"
            prop="receiverMobile">
        </el-table-column>
        <el-table-column
            label="收货人邮编"
            align="center"
            prop="receiverZipCode">
        </el-table-column>
        <el-table-column
            label="收货人"
            align="center"
            prop="receiver">
        </el-table-column>
        <el-table-column
            label="发票类型"
            align="center"
            prop="invoiceType">
        </el-table-column>
        <el-table-column
            label="订单来源："
            align="center"
            prop="sourceType">
        </el-table-column>
        <el-table-column
            label="商家ID"
            align="center"
            prop="sellerId">
        </el-table-column>


        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteOrder(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </el-card>

    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">

      <el-form :model="Order" :rules="Orderrules" ref="ruleForm">
        <el-form-item label=" 订单id" prop="orderId" :label-width="formLabelWidth">
          <el-input v-model="Order.orderId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label=" 实付金额" prop="payment" :label-width="formLabelWidth">
          <el-input v-model="Order.payment" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="支付类型" prop="paymentType" :label-width="formLabelWidth">
          <el-radio v-model="Order.paymentType" label="1">在线支付</el-radio>
          <el-radio v-model="Order.paymentType" label="2">货到付款</el-radio>
        </el-form-item>
        <el-form-item label="邮费" prop="postFee" :label-width="formLabelWidth">
          <el-input v-model="Order.postFee" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" :label-width="formLabelWidth">
          <el-radio v-model="Order.status" label="1">未付款</el-radio>
          <el-radio v-model="Order.status" label="2">已付款</el-radio>
          <el-radio v-model="Order.status" label="3">未发货</el-radio>
          <el-radio v-model="Order.status" label="4">已发货</el-radio>
          <el-radio v-model="Order.status" label="5">交易成功</el-radio>
          <el-radio v-model="Order.status" label="6">交易关闭</el-radio>
          <el-radio v-model="Order.status" label="7">待评价</el-radio>
        </el-form-item>
        <el-form-item label="物流名称" prop="shippingName" :label-width="formLabelWidth">
          <el-input v-model="Order.shippingName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="物流单号" prop="shippingCode" :label-width="formLabelWidth">
          <el-input v-model="Order.shippingCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户id" prop="userId" :label-width="formLabelWidth">
          <el-input v-model="Order.userId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="买家留言" prop="buyerMessage" :label-width="formLabelWidth">
          <el-input v-model="Order.buyerMessage" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="买家昵称" prop="buyerNick" :label-width="formLabelWidth">
          <el-input v-model="Order.buyerNick" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="买家是否已经评价" prop="buyerRate" :label-width="formLabelWidth">
          <el-radio v-model="Order.buyerRate" label="1">是</el-radio>
          <el-radio v-model="Order.buyerRate" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="收货人地区名称" prop="receiverAreaName" :label-width="formLabelWidth">
          <el-input v-model="Order.receiverAreaName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货人手机" prop="receiverMobile" :label-width="formLabelWidth">
          <el-input v-model="Order.receiverMobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货人邮编" prop="receiverZipCode" :label-width="formLabelWidth">
          <el-input v-model="Order.receiverZipCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="receiver" :label-width="formLabelWidth">
          <el-input v-model="Order.receiver" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发票类型" prop="invoiceType" :label-width="formLabelWidth">
          <el-radio v-model="Order.invoiceType" label="1">未付款</el-radio>
          <el-radio v-model="Order.invoiceType" label="2">已付款</el-radio>
          <el-radio v-model="Order.invoiceType" label="3">未发货</el-radio>
        </el-form-item>
        <el-form-item label="订单来源" prop="sourceType" :label-width="formLabelWidth">
          <el-radio v-model="Order.sourceType" label="1">app</el-radio>
          <el-radio v-model="Order.sourceType" label="2">pc</el-radio>
          <el-radio v-model="Order.sourceType" label="3">M</el-radio>
          <el-radio v-model="Order.sourceType" label="4">wx</el-radio>
          <el-radio v-model="Order.sourceType" label="5">QQ</el-radio>
        </el-form-item>
        <el-form-item label="商家ID" prop="sellerId" :label-width="formLabelWidth">
          <el-input v-model="Order.sellerId" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrder">确 定</el-button>
      </div>
    </el-dialog>




  </div>
</template>

<script>
import OrderApi from "@/api/order"
import order from "@/api/order";

export default {
  computed: {
    order() {
      return order
    }
  },
  data() {
    return {
      OrderList: [],
      page:1,
      pageSize:5,
      total:100,
      OrderSearch:{},
      dialogFormVisible:false,
      oids:[],
      multipleSelection: [],
      formLabelWidth:'100px',
      Order: {},
      Orderrules: {
        payment: [
          { required: true, message: '请输入实付金额', trigger: 'blur' },

        ],
        paymentType: [
          { required: true, message: '请输入支付类型', trigger: 'blur' },

        ],
        postFee: [
          { required: true, message: '请输入邮费', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请输入状态：1、未付款，2、已付款，3、未发货，4、已发货，5、交易成功，6、交易关闭,7、待评价', trigger: 'blur'  }
        ],
        shippingName: [
          { required: true, message: '请输入物流名称', trigger: 'blur'  }
        ],
        shippingCode: [
          { required: true, message: '请输入物流单号', trigger: 'blur'  }
        ],
        userId: [
          { required: true, message: '请输入用户id', trigger: 'blur'  }
        ],
        buyerMessage: [
          { required: true, message: '请输入买家留言', trigger: 'blur'  }
        ],
        buyerNick: [
          { required: true, message: '请输入买家昵称', trigger: 'blur'  }
        ],
        buyerRate: [
          { required: true, message: '请输入买家是否已经评价', trigger: 'blur'  }
        ],
        receiverAreaName: [
          { required: true, message: '请输入收货人地区名称', trigger: 'blur'  }
        ],
        receiverMobile: [
          { required: true, message: '请输入收货人手机', trigger: 'blur'  }
        ],
        receiverZipCode: [
          { required: true, message: '请输入收货人邮编', trigger: 'blur'  }
        ],
        receiver: [
          { required: true, message: '请输入 收货人', trigger: 'blur'  }
        ],
        invoiceType: [
          { required: true, message: '请输入发票类型(普通发票，电子发票，增值税发票)', trigger: 'blur'  }
        ],
        sourceType: [
          { required: true, message: '请输入订单来源', trigger: 'blur'  }
        ],
        sellerId: [
          { required: true, message: '请输入商家ID', trigger: 'blur'  }
        ]



      },
      title: '添加订单',
      addoredit:1
    }
  },
  created() {
    this.search1()
  },

  methods: {

    async search(){
      const {data:res} = await OrderApi.search(1,this.pageSize,this.OrderSearch)
      console.log(res)
      if (res.code === 200) {
        this.OrderList = res.data.pr.rows
        this.total = res.data.pr.total
      }
      this.page=1
    },
    async search1(){
      const {data:res} = await OrderApi.search(this.page,this.pageSize,this.OrderSearch)
      console.log(res)
      if (res.code === 200) {
        this.OrderList = res.data.pr.rows
        this.total = res.data.pr.total
      }
    },

    editOrder(){
      this.title='添加订单';
      this.addoredit = 1
      this.Order={};
      this.dialogFormVisible = true
    },

    async saveOrder(){
      this.$refs.ruleForm.validate(async valid => {
        let url = "/order/save"
        let method = "post"
        if(this.addoredit === 2){
          url = "/order/update"
          method = "put"}


        if (valid) {
          const {data:res} = await OrderApi.save(url,method,this.Order)

          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.message,
              duration:1000,
              onClose: () => {

                this.dialogFormVisible = false

                this.search1()
              }
            })
          }else{
            this.$message({
              type: 'error',
              message: res.message,
              duration:1000
            })
          }

          console.log('验证成功');
        } else {
          console.log('验证失败');
          return false;
        }
      });

    },
    async deleteOrder(index, row){
      this.oids = []
      if(row){
        this.oids.push(row.orderId)
      }else{
        this.oids = this.multipleSelection.map(m => m.orderId)
      }
      if(this.oids.length==0)
      {
        this.$message({
          type: 'warning',
          message: '没有选择要删除的订单',
          duration: 1000
        });
        return;

      }
      this.$confirm(`是否真的要删除订单编号为${this.oids}的订单吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this
        OrderApi.delete(this.oids)
            .then(({data:res}) => {
              console.log("res:",res)
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.message,
                  duration:1000,
                  onClose: () => {

                    _this.search1()
                  }
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.message,
                  duration:1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEdit(index, row) {

      this.title='修改订单信息';
      this.Order=row;
      this.addoredit = 2
      this.dialogFormVisible=true;


    },
    login(){
      this.$router.push('/userview');
    },


    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;

      this.search1()
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;

      this.search1()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>
<style>
.el-card{
  width: 90%;
//margin: 0 auto;
}
#app{
  display: flex;
  justify-content: center;
}
.el-pagination{
  text-align: right;
  margin-top: 15px;
}
</style>
